<template>
  <div class="app">
    <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" fixed safe-area-inset-top placeholder />
    <div class="warp">
      <div class="text">
        <h3>{{ list.title }}</h3>

<div class="userhead">
  <van-image fit="fill" round width="20vw" height="20vw" :src="list.avatar" />
 <div class="username">{{ list.author }}</div>
      
</div>
       


        <h4>{{ list.content }}</h4>
      </div>
      <div v-for="item in list.imageSrc"><img  v-lazy=item alt="">
      
      </div>
      <!-- <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    > -->
      <van-cell v-for="item in list1" :key="item.create_time" :title="item.content">
        <van-image fit="fill" round width="20vw" height="20vw" :src="item.info.avatar" />
      </van-cell>
      <div>
        <!-- <van-image
  fill
  width="10rem"
  height="10rem"
  src="https://img01.yzcdn.cn/vant/cat.jpeg"
/> -->
      </div>
      <!-- </van-list> -->

    </div>
<div class="LAM">

<van-field

  v-model="message"
  rows="1"
  autosize
  label="评论"
  type="textarea"
  placeholder="请输入你要评论的内容"
> 
  <template #button>
    <van-button size="small" type="primary" @click="sendLAM">发送评论</van-button>
  </template>
</van-field>

</div>

  </div>
</template>

<script>
import { getLine } from '@/api/home';
export default {
  data() {
    return {
      id: '',
      list: [],
      name: '',
      list1: [],
      loading: false,
      finished: false,
      pinglun: '',
      message:''

    };
  },
  created() {
    this.showid()
    this.getpl()

  },
  methods: {
    showid() {

      this.id = this.$route.query.id
      console.log(this.id)

      getLine('/api/get_article_detail', { article_id: this.id }).then(res => {

        this.list = res.data.data
        this.name = res.data.data.username
        // console.log(this.name)
        console.log('list',res)

      }).catch(err => {
        console.log(err)
      })
    },
    onClickLeft() {
      this.$router.back()
    },
    // onLoad() {
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list1.length + 1);
    //     }

    //     // 加载状态结束
    //     this.loading = false;

    //     // 数据全部加载完成
    //     if (this.list1.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    // },
    getpl() {
      getLine('/api/get_comment_list', { article_id: this.id }).then(res => {

        this.list1 = res.data.data
        console.log('list1',this.list1)
      })
    },


    //发送评论
    sendLAM(){
       getLine('/api/add_comment', {user_id:localStorage.getItem('dw-uid'), article_id: this.id , comment_type:0,content:this.message}).then(res => {
console.log(res)
 getLine('/api/get_comment_list', { article_id: this.id }).then(res => {

        this.list1 = res.data.data
        console.log('list1',this.list1)
      }),
       console.log(this.id);
       this.message=''
  
      })
      
    }

  },
};
</script>

<style scoped>
.LAM{
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
}
.userhead{
 display: flex;
margin-bottom: 40px;
margin-top: 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.205);
padding-bottom: 20px;



}
.username{
align-self:center ;
color: green;

}
</style>